

import * as THREE from 'three';
import { Input } from "antd";
import IElement from 'components/Three/interface/IElement';
import useVisible from 'utils/hooks/useVisible';
import SelectElement from 'components/SelectElement';
// import styles from './index.module.less';
import Controller from 'Controller'
import React from "react";

export default function TargetItem() {

    const { visible, onClose, onOpen } = useVisible();

    const threeController = Controller.instance.useMemo(s => s.threeController, []);

    const selectedElementUuid = threeController.useMemo(s => s.selectedElementUuid, []);

    const elementMap = threeController.useMemo(s => s.elementMap, []);

    const element: IElement<THREE.SpotLight> | undefined = React.useMemo(() => selectedElementUuid ? elementMap.get(selectedElementUuid) : undefined, [elementMap, selectedElementUuid])

    const targetName = React.useMemo(() => {
        if (!element) return '原点';
        return element.object3D.target.name || element.object3D.target.uuid
    }, [element])

    const filter = React.useCallback((e:IElement<THREE.Object3D>)=>{
        return e.object3D !== element?.object3D
    },[element])

    const onSelect = React.useCallback((uuid: string) => {
        if (!element) return;
        element.object3D.target = elementMap.get(uuid)?.object3D ?? undefined;
        onClose();
    }, [element, elementMap, onClose])

    if (!element) return <></>;

    return (
        <>
            <Input type="link" onClick={onOpen} value={targetName} readOnly />
            <SelectElement filter={filter} visible={visible} onClose={onClose} onSelect={onSelect} />
        </>
    )
}
